<template>
  <!-- 整体大盒子 -->
  <div class="container_wrapper">
    <!-- 版心 -->
    <div class="container_version_center">
      <!-- 左侧整体盒子 -->
      <div class="left_container_wrapper">
        <!-- 头像框、名字等包裹 -->
        <div class="avatar_wrapper_box">
          <!-- 头像 -->
          <el-avatar class="small_avatar" :size="100" :src="circleUrl" />
          <!-- 用户名和等级盒子 -->
          <div class="name_container_box">
            <div class="account_name">
              <span>用户名</span>
              <span class="level_box">
                <i class="lv"></i>
                <i>1</i>
              </span>
            </div>
          </div>
          <!-- 关注和粉丝 -->
          <el-row>
            <el-col :span="12">
              <div class="account_number">
                <p class="account_count">0</p>
                <p class="tip">关注</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="account_number">
                <p class="account_count">0</p>
                <p class="tip">粉丝</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 导航栏块 -->
        <div class="navigation_block">
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            active-text-color="#303133"
            style="border: 1px solid #fff"
          >
            <el-menu-item
              style="border-radius: 4px; margin-bottom: 10px"
              @click="toAnyRoute('Dynamics')"
              index="1"
            >
              <span>资源动态</span>
            </el-menu-item>
            <el-menu-item
              style="border-radius: 4px 4px 0 0"
              index="2"
              @click="toAnyRoute('My_member')"
            >
              <span>我的会员</span>
            </el-menu-item>
            <el-menu-item index="3" @click="toAnyRoute('Wallet')">
              <span>我的钱包</span>
            </el-menu-item>
            <el-menu-item index="4" @click="toAnyRoute('Coupons')">
              <span>我的优惠券</span>
            </el-menu-item>
            <el-menu-item index="5" @click="toAnyRoute('My_order')">
              <span>我买的订单</span>
            </el-menu-item>
            <el-sub-menu index="6">
              <template #title>
                <span>我卖的</span>
              </template>
              <el-menu-item-group>
                <el-menu-item style="width: 168px; min-width: 108px" index="6-1"
                  >订单管理</el-menu-item
                >
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item style="width: 168px; min-width: 108px" index="6-2"
                  >商品管理</el-menu-item
                >
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item style="width: 168px; min-width: 108px" index="6-3"
                  >客户管理</el-menu-item
                >
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item style="width: 168px; min-width: 108px" index="6-4"
                  >待收款</el-menu-item
                >
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item style="width: 168px; min-width: 108px" index="6-5"
                  >优惠管理</el-menu-item
                >
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item style="width: 168px; min-width: 108px" index="6-6"
                  >评价管理</el-menu-item
                >
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item
                  style="
                    border-radius: 0 0 4px 4px;
                    width: 168px;
                    min-width: 108px;
                  "
                  index="6-7"
                  >保证金</el-menu-item
                >
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item
              style="border-radius: 4px; margin-top: 10px"
              index="7"
            >
              <span>资源动态</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <!-- 右侧整体盒子 -->
      <div class="right_container_wrapper">
        <!-- 头部内容 -->
        <div class="header_container">
          <div class="header_tab_box">
            <span>我的优惠券</span>
          </div>
        </div>
        <!-- 身体内容 -->
        <div class="body_container">
          <div class="exchange_block">
            <div class="exchange_item">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                  <el-input placeholder="请输入优惠券兑换码" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">兑换</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="coupons_item">
              <span><i icon="el-List"></i> 领券中心</span>
              <span><i icon="el-Checked"></i>历史优惠券</span>
            </div>
          </div>
          <div class="coupons_notes"><p>* 优惠券仅用于线下课</p></div>
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Dynamics",
});
</script>
<script lang="ts" setup>
import { reactive, toRefs } from "vue";
import useCenter from "@/views/Center/hooks";
const centerState = useCenter();
const { toAnyRoute } = centerState;
const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
});
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const { circleUrl } = toRefs(state);
</script>
<style scoped lang="scss">
.container_wrapper {
  width: 100%;
  .container_version_center {
    width: 1200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .left_container_wrapper {
      width: 170px;
      .avatar_wrapper_box {
        width: 100%;
        height: 196.7px;
        padding: 21px 0;
        margin-bottom: 10px;
        border-radius: 4px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        .name_container_box {
          width: 100%;
          height: 34px;
          display: flex;
          justify-content: center;
          margin-top: 4px;
          .account_name {
            align-self: center;
            line-height: 22px;
            padding: 6px 0;
            span {
              font-size: 16px;
              color: #111111;
              font-family: "PingFang SC";
              i {
                font-size: 14px;
                color: #fff;
              }
              &.level_box {
                display: inline-block !important;
                border: 1px solid #fff;
                border-radius: 4px;
                padding: 0 8px;
                margin-left: 4px;
                background: linear-gradient(#ff289b, #ff43d0);
                line-height: 1.15;
                .lv {
                  display: inline-block;
                  width: 15px;
                  height: 10px;
                  background-image: url("@/assets/images/level_Lv.@3x.png");
                  background-size: 15px;
                  height: 10px;
                }
              }
            }
          }
        }
        .account_number {
          width: 85px;
          padding-top: 18px;
          text-align: center;
          p {
            margin: 0;
          }
          .account_count {
            margin-bottom: 7px;
          }
          .tip {
            font-size: 14px;
            line-height: 14px;
            color: #7d8090;
          }
        }
      }
      .navigation_block {
        width: 100%;
        padding: 5px 0;
        margin-bottom: 10px;
        .el-menu {
          background-color: #f5f7f9;
        }
        .el-menu-item {
          height: 48px;
          background-color: #fff;
        }

        .el-menu-item.is-active {
          background-color: #fff;
        }
        .el-menu-item:hover {
          background-color: #fff;
        }
        :deep .el-menu-item-group__title {
          width: 0;
          height: 0;
          padding: 0;
          margin: 0;
          background-color: #111111;
        }
        .el-sub-menu {
          background-color: rgb(255, 255, 255);
          min-height: 48px;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
          :deep .el-sub-menu__title {
            height: 48px;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
          }
          :deep .el-sub-menu__title:hover {
            background-color: #fff;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
          }
        }
      }
    }
    .right_container_wrapper {
      width: 1020px;
      .header_container {
        width: 100%;
        height: 72.1px;
        margin-bottom: 10px;
        border-radius: 4px;
        background-color: #ffffff;
        .header_tab_box {
          padding: 25px 30px;
          span {
            font-size: 14px;
          }
        }
      }
      .body_container {
        border-radius: 4px;
        background-color: #ffffff;
        padding: 16px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #111;
        margin-bottom: 20px;
        min-height: 300px;
        .exchange_block {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .exchange_item {
            .el-input {
              :deep .el-input__wrapper {
                height: 38px;
                width: 448px;
                background-color: #f5f7f9;
                padding: 0 15px;
                border: 1px solid #dcdfe6;
              }
            }
            :deep .el-button {
              width: 100px;
              height: 40px;
              margin-left: -20px;
              font-size: 14px;
              color: #7d8090;
              background-color: #f93684;
              border: none;
              padding: 12px 17px;
              font-size: 14px;
              color: #fff;
            }
          }
          .coupons_item {
            margin-top: 10px;
            span {
              margin-right: 20px;
            }
          }
        }
        .coupons_notes {
          width: 100%;
          p {
            font-size: 14px;
            color: #dba059;
          }
        }
        p {
          color: #909399;
        }
      }
    }
  }
}
</style>
